
.message-toolbar {
  display: inline-block;
}

.message-toolbar.is-inline {
  .ti {
    cursor: pointer;
    color: #B3B3B3;
    font-size: 16px;
    margin-left: 12px;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;

    &:hover {
      color: #A6A6A6;
    }
  }

  .is-star.is-active {
    color: @color-yellow;
  }
}

.message-toolbar:not(.is-inline) {
  height: 24px;

  .is-tag ,.light-menu .hint {
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    color: #B3B3B3;
    cursor: pointer;
    padding: 0 2px;
    transition: @transition-duration;
  }

  .is-tag {
    display: inline-block;
    vertical-align: middle;
  }

  .message-read-status {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    height: 24px;
  }

  .light-menu {
    display: inline-block;
    vertical-align: middle;
  }

  .light-menu .hint {
    padding-left: 2px;

    .ti {
      color: #B3B3B3;
      transition: @transition-duration;
    }
  }

  .is-tag:hover,
  .light-menu .hint:hover .ti {
    color: @color-red;
  }

  .is-tag.is-active {
    color: @color-red;
  }

  .light-menu.is-open .hint  {
    > .ti {
      color: @color-red;
    }
  }


  &.is-quit .is-tag {
    color: @color-gray-light;
    cursor: default;
  }
}
